<template>
  <div>
    <el-container style="background-color: #eeeeee">
      <div class="mainbodyreg">
        <el-main height="auto">
          <div class="regisdiv">
            <div class="regisform">
              <img src="/images/register_01.png" alt="" />
              <div class="formreg">
       <el-form
                  label-position="right"
                  :rules="rules"
                  :model="form"
                  ref="form"
                  label-width="150px"
                  :inline="false"
                  size="normal"
                >
                  <el-form-item label="用户名" prop="user">
                    <el-input
                      v-model="form.user"
                      placeholder="请输入用户名"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="pwd">
                    <el-input
                      show-password
                      type="password"
                      v-model="form.pwd"
                      placeholder="请输入密码"
                    ></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="确认密码" prop="checkpwd">
                    <el-input
                      type="password"
                      v-model="form.checkpwd"
                      placeholder="请再次输入密码"
                    ></el-input>
                  </el-form-item> -->
                  <el-form-item label="企业名称" prop="name">
                    <el-input
                      v-model="form.name"
                      placeholder="请输入企业名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="企业性质" prop="style">
                    <el-input
                      v-model="form.style"
                      placeholder="请输入企业性质"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="企业类型" prop="class">
                    <el-select v-model="form.class" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="企业法人" prop="people">
                    <el-input
                      v-model="form.people"
                      placeholder="请输入企业法人"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="注册资本（万元）" prop="money">
                    <el-input
                      v-model="form.money"
                      placeholder="注册资本"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="企业注册时间" prop="time">
                    <el-date-picker
                      v-model="form.time"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="统一社会信用代码" prop="code">
                    <el-input
                      v-model="form.code"
                      placeholder="请输入统一社会信用代码"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="企业地址" prop="address">
                    <el-input
                      suffix-icon="el-icon-location-information"
                      v-model="form.address"
                      placeholder="请输入企业地址"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="营业执照" prop="picture">
                    <el-upload
                      class="upload-demo"
                      action="/images"
                      :file-list="fileList"
                      list-type="picture"
                    >
                      <el-button size="small" type="primary"
                        >点击上传</el-button
                      >
                      <div slot="tip" class="el-upload__tip">
                        营业执照中信息必须与工商信息一致
                        法定代表人身份证姓名必须与企业法定代表定代表人姓名一致
                        上传图片必须为实物图片，并且露出四个角
                      </div>
                    </el-upload>
                  </el-form-item>

                  <el-form-item style="text-align: center">
                    <el-button
                      type="primary"
                      style="background: #5677ff"
                      @click="submitForm('form')"
                      >完成创建并提交</el-button
                    >
                    <el-button
                      type="primary"
                      size="default"
                      @click="returnindex"
                      >返回</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>

            </div>
          </div>
        </el-main>
        <el-footer height="">
          <!-- Footer content -->
        </el-footer>
      </div>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
         fileList: [{name: 'food.jpg', url: '/images/imgC_1.png'}],
      value: "",
      options: [
        { value: "1", label: "工业企业" },
        { value: "2", label: "服务业企业" },
        { value: "3", label: "批发零售企业" },
        { value: "4", label: "住宿餐饮企业" },
        { value: "5", label: "建筑业企业" },
        { value: "6", label: "房地产开发企业" },
      ],
    form: {
        user: "",
        pwd: "",
        checkpwd: "",
        name: "",
        style: "",
        class: "",
        people: "",
        money: "",
        time: "",
        code: "",
        address: "",
      },
      rules: {
        user: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        checkpwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        name: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
        style: [{ required: true, message: "请输入企业性质", trigger: "blur" }],
        class: [{ required: true, message: "请输入类型", trigger: "blur" }],
        people: [{ required: true, message: "请输入法人", trigger: "blur" }],
        money: [{ required: true, message: "请输入注册资本", trigger: "blur" }],
        time: [{ required: true, message: "请输入注册时间", trigger: "blur" }],
        code: [{ required: true, message: "请输入统一社会信用代码", trigger: "blur" }],
        address: [{ required: true, message: "请输入企业地址", trigger: "blur" }],
        // picture: [{ required: true, message: "请输入营业执照", trigger: "blur" }],
      },
    };
  },
  methods: {
      returnindex() {
      this.$router.replace({
        name: "index",
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            type: "success",
            message: "提交成功",
          });
          for (let key in this.form) {
            this.form[key] = "";
          }
          this.$router.replace({
            name: "index",
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
.mainbodyreg {
  border: none;
  margin: 20px auto;
}
.mainbodyreg .el-main {
  margin: 0px;
  padding: 20px 50px;
}
.regisdiv {
  margin: 0px auto;
  width: 1200px;
  padding-top: 20px;
  padding-bottom: 20px;

  background-color: white;
}
.regisform {
  padding-bottom: 50px;
  margin: 0px auto;
  box-shadow: 1px 1px 5px 1px #888888;
  width: 800px;
  height: auto;
}
.formreg {
  margin: 50px 150px 70px 50px;
}
</style>